﻿var editor;
var myControl = null;

jQuery(function ()
{
    $("#tool").kendoPanelBar(
    {
        expandMode: "single"
    });

    $("#tool").find("li li").dblclick(function ()
    {
        var dataObject = eval('(' + $(this).attr("data") + ')');
        build(guid(), dataObject);
    });

    editor = UE.getEditor("editor",
    {
        toolbars: toolbarsWF,
        initialFrameHeight: 400,
        imageManagerUrl: "/Common/Attachment/ReadForEditor?TypeKey=Common_EditorImage&Key=" + $("#Id").val(),
        imageUrl: "/Common/Attachment/UploadForEditor?TypeKey=Common_EditorImage&Key=" + $("#Id").val(),
        fileUrl: "/Common/Attachment/UploadForEditor?TypeKey=Common_EditorFile&Key=" + $("#Id").val(),
        wordCount: false,
        elementPathEnabled: false
    });
    editor.addListener("contentChange", function ()
    {
        doc().find("table").addClass("tblForm");

        doc().find(".control").unbind("mouseenter");
        doc().find(".control").unbind("mouseleave");
        doc().find(".control").mouseenter(function ()
        {
            myControl = $(this);
        });
        doc().find(".control").mouseleave(function ()
        {
            myControl = null;
        });
    });

    editor.addListener("selectionChange", function (a, b)
    {
        $("#property").find("form").hide();
        if (myControl == null || myControl.attr("control") == null)
        {
            myControl = null;
        }
        else
        {
            $("#property").find("." + myControl.attr("control")).show();
            select();
        }
    });

    editor.addListener("ready", function ()
    {
        $(".edui-editor").parent().css("width", "100%");
        $(".edui-editor").css("width", "100%");
    })
});

function doc()
{
    return $("#baidu_editor_0").contents();
}

function getControlName(no)
{
    var index = no ? no : 1;
    var name = "Name" + index;
    doc().find(".control").each(function ()
    {
        var dataObject = eval('(' + $(this).attr("data") + ')');
        if (dataObject.Name == name)
        {
            name = getControlName(++index);
            return;
        }
    });

    return name;
}

function build(clientId, data)
{
    if (data.Name == "")
    {
        data.Name = getControlName();
    }

    var template = "<input readonly id='" + clientId + "' class='control'  control='" + data.Control + "' data='" + JSON.stringify(data) + "' value='" + data.Display + "' />";
    var input = doc().find("#" + clientId);
    if (input.length > 0)
    {
        input.replaceWith(template);
    }
    else
    {
        editor.execCommand("inserthtml", template);
    }

    doc().find(".control").unbind("mouseenter");
    doc().find(".control").unbind("mouseleave");
    doc().find(".control").mouseenter(function ()
    {
        myControl = $(this);
    });
    doc().find(".control").mouseleave(function ()
    {
        myControl = null;
    });
}

function select()
{
    if (myControl == null) return;

    var property = $("#property").find("." + myControl.attr("control"));
    var dataObject = eval('(' + myControl.attr("data") + ')');

    $("#ClientId").val(myControl.attr("id"));

    property.find("[name='Control']").val(dataObject.Control);
    property.find("[name='Name']").val(dataObject.Name);
    property.find("[name='Type']").val(dataObject.Type);
    property.find("[name='Required']").val(dataObject.Required);
    property.find("[name='Required']").prev()[0].checked = (dataObject.Required == "true");
    property.find("[name='Display']").val(dataObject.Display);
    if (dataObject.Control == "DatePicker" || dataObject.Control == "DateTimePicker")
    {
        property.find("[name='Value']").data("kendoDateTimePicker").value(dataObject.Value);
    }
    else if (dataObject.Control == "IntegerTextBox" || dataObject.Control == "NumericTextBox")
    {
        property.find("[name='Value']").data("kendoNumericTextBox").value(dataObject.Value);
    }
    else if (dataObject.Control == "PostDropDownList")
    {
        property.find("[name='Value']").data("kendoDropDownList").value(dataObject.Value);
    }
    else if (
        dataObject.Control == "PostDropDownCheckBoxList" ||
        dataObject.Control == "DepartmentDropDownTree" ||
        dataObject.Control == "DepartmentDropDownCheckBoxTree" ||
        dataObject.Control == "HumanPicker"
        )
    {
        property.find("[name='Value']").val(dataObject.Value);
        property.find("[name='Value']").trigger("change");
    }
    else
    {
        property.find("[name='Value']").val(dataObject.Value);
    }
    property.find("[name='Width']").data("kendoNumericTextBox").value(dataObject.Width);
    if (dataObject.Control == "TextArea")
    {
        property.find("[name='Height']").data("kendoNumericTextBox").value(dataObject.Height);
    }
}

function modify()
{
    var property = $("#property").find("form:visible");
    build($("#ClientId").val(), property.serializeObject());
}

function getResult()
{
    var html = "<div>" + doc().find("body").html() + "</div>";
    var view = $(html);
    var data = "";
    view.find(".control").each(function (i)
    {
        var dataObject = eval('(' + $(this).attr("data") + ')');

        //视图
        var index = dataObject.Required ? 1 : 0;
        var templage = $("#template").find("." + dataObject.Control + " div").eq(index).text();
        templage = templage
                    .replace(/%Name%/g, dataObject.Name)
                    .replace(/%Height%/g, dataObject.Height)
                    .replace(/%Width%/g, dataObject.Width);
        $(this).replaceWith(templage);

        //数据
        data = data + "<" + dataObject.Name + " Type=\"" + dataObject.Type + "\" Required=\"" + dataObject.Required + "\">" + dataObject.Value + "</" + dataObject.Name + ">";
    });
    data = "<Data>" + data + "</Data>";

    var result = { Id: $("#Id").val(), Design: doc().find("body").html(), View: "@model XElement \r" + view.html(), Data: data };
    return result;
}

